<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">
      <div class="btns f-l">
        <span>任务名称：</span>
        <select class="btn-select" @change="selectFn">
          <option value="">选择全部</option>
          <option v-for="item in selectList" :value="item.key">{{item.key}}</option>
        </select>
      </div>
      <div class="btns f-r">
        <button type="button" class="btn btn-warning" @click="toggleUploadeModal('detail')">详情</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              {{trs[tds.key]}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="Number(tableRowParams.pageSize)"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/tableRowParams.pageSize))"
        @current-change="tablePageData"
      ></Pages>
      <detailTaskMonitor :detailTaskMonitorObj="detailTaskMonitorObj"
      @closeModal="closeDetailTaskMonitor"></detailTaskMonitor>
    </div>
  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import detailTaskMonitor from './detailTaskMonitor'
  export default {
    name: "taskMonitor",
    data(){
      return{
        detailTaskMonitorObj: {
          isShow: false,
          id: ''
        },
        isActive:-1,
        selectRowId:"",
        tableHeader:[
          {"key":"transactionName","value":"任务名称"},
          {"key":"success","value":"比较结果（正常）"},
          {"key":"fail","value":"比较结果（异常）"},
          {"key":"lastExecuteTime","value":"最后执行时间"}
        ],
        tableRow: {
          list: [],
          total: 0
        },
        tableRowParams : {
          pageIndex:"1", //当前页
          pageSize:"20", //数量
        },
        selectList: [],
        selectBtnId: ''
      }
    },
    components:{
      Pages,
      detailTaskMonitor
    },
    created(){
      this.getSelectList()
    },
    mounted(){
      this.tableRowAjax();
    },
    methods:{
      // 下拉选择
      selectFn (ele) {
        this.selectBtnId = ele.target.value
        this.tableRowAjax()
        console.log(this.selectBtnId);
      },
      // 获取选择的数据
      getSelectList () {
        let _url = this.Beacon +
          '/transaction/showList?' +
          'name=' +
          '&func=' +
          '&fromJoinId=' +
          '&size=1000' +
          '&current=1'
        this.$axios.get(_url)
          .then(res =>{
            //console.log(data);
            let _list = []
            res.data.content.records.map((item, index) => {
              _list.push({
                key: item.name,
                value: item.id
              })
            })
            this.selectList = _list
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //加载表格
      tableRowAjax(){
        // GET datasource/queryList 'http://172.16.0.94:20502/datasource/queryList?datasourceName=11&datasourceType=11&size=17&current=1'
        // 清除选择
        this.clearSelect();
        this.s_loading(true)
        this.tableRowRealAjax ()
      },
      tableRowRealAjax () {
        let _url = this.Beacon +
          '/result/dashboard' +
          '?transactionName=' +
          this.selectBtnId +
          '&size=' +
          this.tableRowParams.pageSize +
          '&current=' +
          this.tableRowParams.pageIndex;
        this.$axios.get(_url)
          .then(res =>{
            this.tableRow.list = res.data.records;
            this.tableRow.total = res.data.total;
            this.s_loading(false)
          })
          .catch((err)=>{
            this.s_loading(false)
            this.s_alert('列表数据加载错误')
            //console.log(err);
          })
      },
      //翻页加载
      tablePageData(page){
        this.tableRowParams.pageIndex = page
        this.tableRowAjax();
        //console.log(page);
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.addModalObj.isShow = !this.addModalObj.isShow;
        if( this.addModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //修改弹窗显示与隐藏
      toggleUploadeModal(str){
        if( this.selectRowId !=="" ){
          this.detailTaskMonitorObj.isShow = !this.detailTaskMonitorObj.isShow;
          this.detailTaskMonitorObj.type = str;
        }else{
          this.s_alert("请选择需要查看的任务！");
          return
        }
        if( this.detailTaskMonitorObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //选择行
      selectRow(obj,index){
        this.detailTaskMonitorObj.id = obj.transactionName;
        this.selectRowId = obj.transactionName;
        this.isActive = index;
      },
      //清除选择
      clearSelect(){
        this.isActive = -1;
        this.selectRowId = "";
      },
      // 关闭详情
      closeDetailTaskMonitor () {
        this.detailTaskMonitorObj.isShow = false
        this.clearSelect()
      }
    },
  }
</script>

<style scoped>

</style>
